<template>
  <div>

    <el-container class="login-container">
      <!-- 背景装饰层 -->
      <div class="login-bg-decoration"></div>
      <el-main class="center-content">
    <!-- 登录卡片 -->
    <el-card class="login-card">
      <div slot="header" class="login-header">
        <div class="logo-container">
          <i class="el-icon-s-grid logo-icon"></i>
        </div>
        <h2>电力设备监测与管理系统</h2>
        <p>智能监测 · 高效运维</p>
      </div>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="user">
          <el-input
              v-model="ruleForm.user"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              class="form-input"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
              type="password"
              prefix-icon="el-icon-lock"
              class="form-input"
          ></el-input>
        </el-form-item>

<!--        <el-form-item class="remember-me">-->
<!--          <el-checkbox v-model="ruleForm.rememberMe" class="checkbox-custom">记住我</el-checkbox>-->
<!--          <el-button type="text" class="forgot-password">忘记密码？</el-button>-->
<!--        </el-form-item>-->

          <el-button
              @click="visitor()"
              type="text"
              class="visitor-btn"
          >
            普通访客？直接进入
          </el-button>
          <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              :loading="loading"
              class="primary-login-btn"
          >
            {{ loading ? '登录中...' : '立即登录' }}
          </el-button>
      </el-form>
    </el-card>

<!--    &lt;!&ndash; 页脚信息 &ndash;&gt;-->
<!--    <div class="login-footer">-->
<!--      <p>© 2023 电力设备监测与管理系统 版权所有</p>-->
<!--    </div>-->
        </el-main>
  </el-container>
  </div>
</template>

<script>
import { api } from "@/api";

export default {
  data() {
    return {
      ruleForm: {
        user: '',
        password: '',
        rememberMe: false
      },
      rules: {
        user: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      },
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        phone: ""
      },
      registerRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/,
            message: "密码需6-20位，包含字母和数字",
            trigger: "blur"
          }
        ],
        confirmPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.registerForm.password) {
                callback(new Error("两次密码输入不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1\d{10}$/,
            message: "请输入正确的11位手机号码",
            trigger: "blur"
          }
        ]
      },
      registerDialogVisible: false,
      loading: false
    };
  },
  methods: {
    submitForm(formName) {
      this.loading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loginData = {
            username: this.ruleForm.user,
            password: this.ruleForm.password
          };

          api.user.loginTest(loginData.username, loginData.password)
              .then(response => {
                localStorage.setItem('satoken', response.satoken);
                localStorage.setItem('userId',response.userId);
                return this.getCurrentUserPermissions();
              })
              .then(() => {

                this.$router.push('/home');
              })
              .catch(error => {
                localStorage.removeItem('satoken');
                localStorage.removeItem('userPermissions');
                this.$message.error(error.message || '登录失败');
              })
              .finally(() => {
                this.loading = false;
              });
        } else {
          this.loading = false;
        }
      });
    },
    visitor() {

      this.$router.push('/home');
    },
    getCurrentUserPermissions() {
      return api.user.getCurrentUserPermissions()
          .then(res => {
            if (res.status === 'success') {
              localStorage.setItem('userPermissions', JSON.stringify(res.permissions));

              return true;
            }
          })
          .catch(error => {
            localStorage.removeItem('userPermissions');
            this.$message.error('获取权限失败：' + error.message);
          });
    },
  }
};
</script>

<style scoped>
/* 容器样式 */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  background: url('@/assets/loginback.jpg') no-repeat center center;
  background-size: cover;
  position: relative;
  padding: 20px;
  overflow: hidden;
}

/* 背景装饰 */
.login-bg-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 31, 68, 0.8) 0%, rgba(10, 31, 68, 0.95) 100%);
  z-index: 1;
}
/* 中间容器 */
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 登录卡片 */
.login-card {
  width: 100%;
  max-width: 500px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
  text-align: center;
}

.login-card:hover {
  transform: translateY(-5px);
}

/* 头部样式 */
.login-header {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, #0A1F44 0%, #1E3A8A 100%);
  display: flex;
  flex-direction: column;
  align-items: center; /* 新增：垂直居中 */
  color: #ffffff;
  margin: -20px -20px 20px;
}

.logo-container {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.logo-icon {
  font-size: 40px;
  color: #0A1F44;
}

.login-header h2 {
  font-size: 24px;
  margin-bottom: 8px;
  font-weight: 600;
}

.login-header p {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
}

/* 表单样式 */
.demo-ruleForm {
  padding: 20px 40px 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-input {
  border-radius: 6px;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 记住我和忘记密码 */
.remember-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-left: 10px;
  flex-wrap: wrap;
}
.checkbox-custom {
              color: #606266;
              font-size: 14px;
              display: flex;
              align-items: center;
            }
.forgot-password {
  color: #409EFF;
  font-size: 14px;
  padding: 0;
  height: auto;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.forgot-password:hover {
  color: #66b1ff;
}

.visitor-btn-container {
  width: 100%;
  margin: 15px 0;
                }
.visitor-btn {
             color: #606266;
             font-size: 14px;
             transition: color 0.2s;
             display: block; /* 改为块级元素 */
              margin: 0 auto; /* 水平居中 */
              width: fit-content; /* 自适应内容宽度 */
}


.visitor-btn:hover {
  color: #0A1F44;
}

/* 登录按钮组 */
.login-btn-group {
  margin-top: 20px;
}

.primary-login-btn {
  width: 100%;
  height: 42px;
  font-size: 16px;
  border-radius: 6px;
  background: linear-gradient(135deg, #0A1F44 0%, #1E3A8A 100%);
  border: none;
  transition: all 0.3s ease;
  max-width: 300px; /* 控制最大宽度 */
  align-self: center;
}

.primary-login-btn:hover {
  background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
}
/* 响应式调整 */
@media (max-width: 576px) {
  .demo-ruleForm {
    padding: 20px 20px 30px;
  }

  .primary-login-btn {
    width: 60%;
  }

  .register-btn {
    width: 40%;
  }
}
</style>